<!--html-->
<template>
    <div>
       <h3>
        姓名：{{ name }}
    </h3>
    <h3>
        年龄：{{ age }}
    </h3>
    <button @click="changeName">展示姓名</button>
    <button @click="changeAge">展示年龄</button>
    <button @click="showTel">查看联系方式</button> 
    </div>
    
</template>
<!--js或ts-->
<script lang="ts" setup name = "Person">
import {ref} from 'vue' //ref响应式的
//数据
let name = ref('zhangsan')//setup直接let中不是响应式数据，需要ref()包裹
let age = ref(18)
let tel = '138888888999'//tel不是响应式数据
//方法
function changeAge(){
    age.value += 1//age.value是响应式数据 age是响应式数据时调用要用.value
}
function changeName(){
    name.value = '李四'
}
function showTel(){
    alert(tel)
}
</script>
<!--css-->
<style>

</style>